<style>
  /* 覆盖样式 */
  .hl-merge-checkbox-button {
    margin: 0
  }

  .hl-merge-checkbox-button.is-inline {
    display: block
  }

  main {
    margin: 0 24px 20px;
  }

  .icon-Gm-calendar:before {
    top: 0
  }

  .hl-radio-container {
    line-height: 34px;
  }

  .GDZJ .hl-radio-container .hl-radio-inner {
    left: -15px
  }

  .calendar_container {
    width: 140px;
  }

  .page_title {
    line-height: 56px;
    font-size: 16px;
    color: #999;
    border-bottom: 1px solid #F2F2F2;
  }

  .content_container {
    padding: 16px 0;
    font-size: 14px;
  }

  .content_header {
    margin-bottom: 25px;
  }

  .content_header>section {
    display: flex;
    align-items: center;
  }

  .content_header>section p {
    width: 80px;
    color: #666;
  }

  .content_body>div {
    margin-bottom: 30px;
  }

  .mb-12 {
    margin-bottom: 12px;
  }

  .section_title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  .section_title>span {
    color: #929BA8
  }

  .section_title>div {
    color: #565E99;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .section_title>div>b {
    margin-right: 8px
  }

  input[type=number] {
    -moz-appearance: textfield;
  }

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .entry_list li {
    border-right: 1px solid #e5e5e5;
  }

  .entry_list li:last-child {
    border-right: none
  }

  .JTZJ input,
  .MZQ input,
  .ZQXFX input,
  .LSFX input,
  .YCXFX input {
    width: 100%;
    line-height: 38px;
    border: none;
    outline: none;
    box-shadow: none;
    text-align: center;
  }

  .iconHover {
    position: relative;
  }

  .hoverText {
    display: none;
    position: absolute;
    z-index: 9999;
    left: -185px;
    top: 6px;
    width: 378px;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    color: #999;
  }

  .hoverText div {
    position: absolute;
    display: inline-block;
    top: 11px;
    left: 185px;
    width: 0;
    height: 0px;
    content: '';
    border-style: solid;
    border-width: 6px;
    border-color: #fff #fff transparent transparent;
    transform: rotate(314deg);
    box-shadow: 2px -2px 2px #ccc;
    color: #999;
  }

  .hoverText ul {
    width: 100%;
    padding: 8px 18px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 4px 2px rgba(200, 200, 200, .75);
  }

  .iconHover:hover .hoverText {
    display: flex;
  }

  .hl-checkbox {
    line-height: 15px;
  }

  .hl-radio {
    margin-right: 15px;
  }

  .instro li {
    display: flex;
    flex-direction: column;
  }

  .hl-checkbox {
    line-height: 15px;
  }

  .textOH {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .insertbox input {
    width: 76px;
    margin-right: 10px;
  }

  .dy-flex {
    display: flex;
    align-items: center;
  }

  .entry-container {
    border: 1px solid rgba(232, 229, 226, 1);
    margin-bottom: 10px;
  }

  .entry-container:hover {
    border: 1px solid #565E99;
  }

  .entry-header {
    height: 46px;
    background: #F2F2F2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;

  }

  .entry-header ul {
    display: flex;
    align-items: center;
  }

  .entry-header ul input {
    width: 76px;
    height: 34px;
    background: #fff;
    border-radius: 4px;
    color: #EA8E6F;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 10px;
  }

  .entry-header ul li {
    display: flex;
    align-items: center;
  }

  .entry-body {
    background: #fff;
    height: 78px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .entry-body ul {
    display: flex;
    align-items: center
  }

  .entry-body ul input {
    width: 96px;
    margin-right: 10px;
  }

  .entry-container {
    border-radius: 4px;
    overflow: hidden;
  }

  .color_Orange {
    color: #EA8E6F
  }

  .orangeBlock {
    display: inline-block;
    width: 12px;
    height: 2px;
    background: #999;
    margin: 0 15px;
  }

  .mark-container {
    width: 480px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
  }

  .mark-container .title {
    font-size: 16px;
    line-height: 44px;
    text-align: center;
  }

  .mark-container .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
  }

  .templateList {
    width: 780px;
    background: #fff;
    box-shadow: 0px 0px 6px 0px rgba(136, 136, 136, 0.75);
    border-radius: 6px;
  }

  .templateList_title {
    height: 46px;
    text-align: center;
    line-height: 46px;
  }

  .templateList_content {
    background: #F9F9F9;
    padding: 24px 0px 77px 16px;
  }

  .TC_header {
    color: #666;
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E8E8;
    padding-right: 20px;
    margin-bottom: 18px;
  }

  .TC_header>div {
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .TC_header>ul {
    display: flex;
    align-items: center;
  }

  .TC_header>ul>li {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }

  .TC_mask {
    display: none;
    position: absolute;
    z-index: 9;
    width: 140px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    /* text-align: center; */
    text-indent: 47px;
    line-height: 36px;
    color: #fff;
    cursor: pointer;
  }

  .check-auth {
    display: inline-block;
    width: 13px;
    height: 13px;
    position: relative;
    border: 1px solid #666;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-auth-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #44B548;
    width: 13px;
    height: 13px;
    border: 1px solid #44B548;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-item {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 99;
    background: #fff;
    border-radius: 8px;
    right: 10px;
    top: 9px;
  }

  .check-item-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #5e67a5;
    width: 13px;
    height: 13px;
    border: 1px solid #5e67a5;
    border-radius: 4px;
    margin-right: 10px;
  }

  .tem-item {
    width: 140px;
    height: 36px;
    background: #44B548;
    box-shadow: 1px 1px 2px 0px rgba(163, 184, 198, 0.5);
    border-radius: 4px;
    margin: 0 10px 10px 0;
    overflow: hidden;
    position: relative;
    line-height: 36px;
    text-indent: 10px;
    color: #fff;
    padding-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .tem-item:hover .TC_mask {
    display: block
  }

  .tem-item:hover .TC_text {
    -webkit-filter: blur(3px);
  }

  .tem-item-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .TC_selected_active {
    color: #44B548
  }

  .TC_selected_icon {
    position: absolute;
    z-index: 9999;
    right: 12px;
    top: 12px;
    font-size: 12px;
  }

  .templateList_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
  }

  .TC_close_icon {
    float: right;
    margin: 15px 20px 0 0;
  }


  .mzqStyle ul {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 40px;
  }

  .alert-mes {
    font-size: 12px;
    margin-left: 10px;
    display: inline-block;
    width: 250px;
  }

  .oneBut .yes {
    width: 100% !important;
  }

  #specialbox1 input {
    text-align: left !important;
  }
  #specialbut001 span{
    margin: 0;
  }
  .expense-fk-item-wrapper {
    cursor:not-allowed;
    background-color:#f3f3f3;
  }
  .expense-fk-item-wrapper input[disabled]{
    cursor:not-allowed;
    background-color:#f3f3f3;
  }
</style>
<main id="contract_create_2">
  <p class="page_title">合同管理-{{contractId?'编辑':'新建'}}合同- 租赁信息</p>
  <div class="content_container">
    <!-- 录入时间 -->
    <div class="content_header">
      <section class="mb-12">
        <p>签订日期：</p>
        <div class="calendar_container">
          <web-calendar type="primary" v-model="signingDate" tips="非必选"></web-calendar>
        </div>
      </section>
      <section class="mb-12">
        <div class="dy-flex" style="align-items: center;margin-right: 60px;">
          <p>租赁期限：</p>
          <div class="calendar_container">
            <web-calendar type="primary" v-model="beginDate" :afterdate="endDate"></web-calendar>
          </div>
          <span style="margin:0 10px">-</span>
          <div class="calendar_container">
            <web-calendar type="primary" v-model="endDate" :beforedate="beginDate"></web-calendar>
          </div>
        </div>
        <div class="dy-flex" style="align-items: center">
          <p>快捷选择：</p>
          <hl-checkbox-button :data="timeList.list" v-model="timeList.active" @on-click="selectTimeListActive"
            width="60" inline merge></hl-checkbox-button>
        </div>
      </section>
      <section class="mb-12">
        <p>收款日：</p>
        <hl-checkbox-button :data="billDate.BFList" v-model="billDate.BFCode" @on-click="selectBFActive" width="100"
          inline merge></hl-checkbox-button>
        <div style="width: 20px"></div>
        <hl-checkbox-button :data="billDate.dayList" v-model="billDate.dayCode" @on-click="selectDayActive" width="100"
          inline merge></hl-checkbox-button>
        <div>
          <input type="number" placeholder="整数" class="bg-fff form-control inline js-skrr" v-model="billDate.naturalDay"
            style="width: 60px;margin:0 10px 0 40px">
          <span v-if="billDate.dayCode == 'TS'">个自然日</span>
        </div>
      </section>
      <section class="mb-12">
        <p class="mr-16 width-70"></p>
        <span style="color: #EA8E6F">例：设置为5天，则1月8日开始的账期付款截止时间为1月13号</span>
      </section>
      <section>
        <p>首期收款日:</p>
        <div class="calendar_container">
          <web-calendar type="primary" v-model="SQdate" @change="hidebillPlan('Y', rentBill.bet , 'bet')">
          </web-calendar>
        </div>
      </section>
    </div>
    <!-- 各种费项 -->
    <div class="content_body" @click="isPayBillFlag = false">
      <!-- 固定租金 -->
      <div class="GDZJ" v-if="haveGDflag">
        <div class="section_title">
          <span>固定租金</span>
          <div v-if="!isGDZJflag" @click="setGDZJ"><b class="icon-Org-account"></b>新增</div>
          <div v-if="isGDZJflag" @click="setGDZJ"><b class="icon-Gm-delete-2"></b>删除</div>
        </div>
        <div class="ct-rd-wrap" v-if="isGDZJflag">
          <div class="ct-rd-tit">
            <span v-if="getCtPrevData.contactType.active == 'ER'">计费方式：<b>按单元面积</b></span>
            <span v-if="getCtPrevData.contactType.active == 'WR'">计费方式：<b>工位个数</b></span>
            <span v-if="getCtPrevData.contactType.active == 'ER'">租赁面积：<b>{{utAge | toFixed2}}m²</b></span>
            <span v-if="getCtPrevData.contactType.active == 'WR'">工位个数：<b>{{wpNum}}个</b></span>
            <span>车位数：<b>{{stNum}}个</b></span>
          </div>
          <div class="dy-flex ct-rd-in border-b">
            <div class="dy-fx-1 pt-8 pb-8">
              <span>租金单价：</span>
              <input type="number" class="form-control w-1" v-model="oPrice" @blur="calculateRent(oPrice,1)"/>
              <hl-select :data="setUnit[setUnit.active].list" v-model="setUnit.nIndex" type="primary" width="150"
                @on-change="setUnitGr"></hl-select>
            </div>
            <div class="dy-fx-1 border-l pt-8 pb-8 dy-flex">
              <span style="margin-right: 43px;">日租金：</span>
              <input type="number" class="form-control w-1" v-model="dRent" @blur="calculateRent(dRent,2)"/> 元/天
              <i class="alert-mes" v-if="dayRentPriceAlert">({{dayRentPriceAlert}})</i>
            </div>
          </div>
          <div class="dy-flex ct-rd-in border-b">
            <div class="dy-fx-1 pt-8 pb-8 dy-flex">
              <span style="line-height: 34px">月租金计算方式：</span>
              <hl-radio :data="setRent.list" v-model="setRent.active"
                @on-click="hidebillPlan('Y', rentBill.bet , 'bet')"></hl-radio>
            </div>
            <div class="dy-fx-1 pt-8 pb-8 dy-flex" v-show="setRent.active.join('') == 'M'">
              <span style="margin-right: 43px;">月租金：</span>
              <input type="number" class="form-control w-1" v-model="mRent" @blur="calculateRent(mRent,3)"/>
              元/月
              <i class="alert-mes" v-if="monthRentPriceAlert">({{monthRentPriceAlert}})</i>
            </div>
          </div>
          <!-- 折扣月租金 -->
          <div v-if="haveYZJ">
            <div class="dy-flex ct-rd-in border-b">
              <div class="dy-fx-1 pt-8 pb-8">
                <span style="margin-right: 30px;">折扣率：</span>
                <input type="number" class="form-control w-1" v-model="rentDiscountRate" @change="setYZJitem('s')"
                  :disabled="!(dRent && mRent)"/>
                %
              </div>
              <div class="dy-fx-1 border-l pt-8 pb-8 dy-flex">
                <span>折后日租金：</span>
                <input type="number" class="form-control w-1" v-model="rentDiscountPriceDay" @change="setYZJitem('d')"
                  :disabled="!(dRent && mRent)" /> 元/天
              </div>
            </div>
            <div class="dy-flex ct-rd-in border-b">
              <div class="dy-fx-1 pt-8 pb-8"></div>
              <div class="dy-fx-1 border-l pt-8 pb-8 dy-flex">
                <span>折后月租金：</span>
                <input type="number" class="form-control w-1" v-model="rentDiscountPriceMonth" @change="setYZJitem('m')"
                  :disabled="!(dRent && mRent)" /> 元/月

                <hl-button type="primary" id="specialbut001" style="margin-left: 30px;" @on-click="goToCalculation">折扣计算</hl-button>
              </div>
            </div>
          </div>
          <!-- 中介租金 -->
          <div class="dy-flex ct-rd-in border-b"
            v-if="commissionStatus == 'Y' && getCtPrevData.channelType.selected.code == 'INTERMEDIARY'">
            <div class="dy-fx-1 pt-8 pb-8">
              <span>中介佣金：</span>
              按月租金
              <input type="number" class="form-control w-1" v-model="intermediaryCommissionPercent"
                @change="calIntermediary('p')"/> %
              <input type="number" class="form-control w-1" v-model="intermediaryCommission"
                @change="calIntermediary('v')"/> 元
            </div>
          </div>

          <div class="dy-flex ct-rd-in rent-container" style="margin:0">
            <div class="dy-fx-1 pt-8 pb-8">
              <span>付款周期：</span>
              <b>付</b>
              <input type="number" class="form-control" style="width:75px;" v-model="rentBill.pay" @blur="handleFKZQblur(rentBill.pay)" /> 月
            </div>
            <div class="dy-fx-1 border-l pt-8 pb-8">
              <span style="padding-left:5px;">租金滞纳金比例：</span>
              <input type="number" class="form-control w-1" v-model="rentBill.rentPercent" placeholder="(非必填)" /> %
            </div>
          </div>
        </div>
      </div>
      <!-- 阶梯租金 -->
      <div class="JTZJ" v-if="haveGDflag && isGDZJflag">
        <div class="section_title">
          <span>阶梯租金</span>
          <div @click="addJTZJ"><b class="icon-Org-account"></b>新增</div>
        </div>
        <div v-if="rentLadder.length">
          <div class="dy-flex" style="align-items: center">
            <p style="margin-right: 20px">递增时间：</p>
            <hl-radio :data="ladderRentArr" v-model="ladderRentActive"></hl-radio>
          </div>
          <div class="ct-ladder-wrap mt-15 border">
            <ul class="dy-flex ct-ladder-list bg-filter border-b color-gray">
              <li class="dy-fx-2">阶梯开始时间</li>
              <li class="dy-fx-1">递增率(%)</li>
              <li class="dy-fx-2">租金单价({{setUnit[setUnit.active].list[setUnit.nIndex.join('')].name}})</li>
              <li class="dy-fx-2">日租金(元/天)</li>
              <li class="dy-fx-2">月租金(元/月)</li>
              <!-- 折扣月租金 -->
              <li class="dy-fx-1" v-if="haveYZJ">折扣率(%)</li>
              <li class="dy-fx-2" v-if="haveYZJ">折后日租金(元/天)</li>
              <li class="dy-fx-2" v-if="haveYZJ">折后月租金(元/月)</li>

              <li class="dy-fx-1">操作</li>
            </ul>
            <ul class="dy-flex ct-ladder-list border-b entry_list" v-for="(item,index) in rentLadder">
              <li class="dy-fx-2">
                <web-calendar id="specialbox1" v-model="item.time"
                  :beforedate="index > 0 ? rentLadder[index-1].time : ''">
                </web-calendar>
              </li>
              <li class="dy-fx-1"><input type="number" v-model="item.lv" @blur="calculateRentLd(item.lv, index, 1)" placeholder="请输入">
              </li>
              <li class="dy-fx-2"><input type="number" v-model="item.dj" @blur="calculateRentLd(item.dj, index, 2)" >
              </li>
              <li class="dy-fx-2"><input type="number" v-model="item.rz" @blur="calculateRentLd(item.rz, index, 3)" >
              </li>
              <li class="dy-fx-2"><input type="number" v-model="item.yz" @blur="calculateRentLd(item.yz, index, 4)" >
              </li>
              <!-- 折扣月租金 -->
              <li class="dy-fx-1" v-if="haveYZJ"><input type="number" v-model="item.dis"
                  :disabled="!(item.rz && item.yz)" @change="setJTitem(index,'s')" placeholder="请输入">
              </li>
              <li class="dy-fx-2" v-if="haveYZJ"><input type="number" v-model="item.disD"
                  :disabled="!(item.rz && item.yz)" @change="setJTitem(index,'d')" >
              </li>
              <li class="dy-fx-2" v-if="haveYZJ"><input type="number" v-model="item.disM"
                  :disabled="!(item.rz && item.yz)" @change="setJTitem(index,'m')" >
              </li>

              <li class="dy-fx-1" @click="delJTZJ(index)"><a>删除</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 押金 -->
      <div class="YJ" v-if="haveYJflag && haveGDflag">
        <div class="section_title">
          <span>押金</span>
          <div v-if="!isYJflag" @click="setYJ"><b class="icon-Org-account"></b>新增</div>
          <div v-if="isYJflag" @click="setYJ"><b class="icon-Gm-delete-2"></b>删除</div>
        </div>
        <div class="ct-ladder-rt mt-15" v-show="isYJflag">
          <div class="dy-flex ct-rd-in"
            style="border-radius: 4px;border: 1px solid rgba(232,229,226,1);margin-top: 14px;">
            <div class="dy-fx-1 pt-8 pb-8">
              <span>押付方式：</span>
              <b>押</b>
              <input type="number" class="form-control" style="width:75px;" v-model="rentBill.bet"
                @blur="hidebillPlan('Y', rentBill.bet , 'bet')"
                :disabled="(!oPrice || !dRent || !mRent || !rentBill.pay)"  /> {{setRent.active+'' == 'M'?'月':'天'}}
              <span>固定租金：</span>
              <input type="number" class="form-control" v-model="menoy" style="width:120px;"
                @blur="hidebillPlan('Y', rentBill.bet , 'menoy')"
                :disabled="(!oPrice || !dRent || !mRent || !rentBill.pay)" /> 元
            </div>
            <div class="dy-fx-1 border-l pt-8 pb-8">
              <span style="padding-left:5px;">押金滞纳金比例：</span>
              <input type="number" class="form-control w-1" v-model="rentBill.proportion" placeholder="(非必填)"
                :disabled="(!oPrice || !dRent || !mRent || !rentBill.pay)" /> %
            </div>
          </div>
          <div class="YCXFX">
            <div class="ct-free-wrap mt-15 border" v-if="dototal > 0">
              <div class="dy-flex ct-ladder-list bg-filter border-b color-gray">
                <div class="dy-fx-3">费用名</div>
                <div class="dy-fx-3">单价</div>
                <div class="dy-fx-3">押几月</div>
                <div class="dy-fx-3">总金额(元)</div>
                <div class="dy-fx-3">滞纳金比例(%)</div>
                <div class="dy-fx-2">操作</div>
              </div>
              <div class="dy-flex ct-ladder-list border-b" v-for="(item, index) in costItem"
                v-if="item.expense_type == 'D'" style="height: auto; line-height:34px;">
                <div class="dy-fx-3 border-r" @click="getcostY(index,'D')">
                  <hl-select :data="cTData_O" v-model="item.expense_code" type="number" width=""
                    @on-change="getCTtype($event,'D')">
                  </hl-select>
                </div>
                <div class="dy-fx-3 border-r overflow relative dy-flex" style="align-items: center">
                  <input type="number" class="w-max bg-fff" style="text-align: center;text-indent: 8px;width: 50%"
                    v-model="item.price" @change="yaTotalFun(item.price,item.expense_period,index)" placeholder="请输入">
                  <!-- <span class="textOH" style="line-height: 20px;height: 20px;z-index: 1;width: 50%;border-left: 1px solid #E5E5E5;">{{item.unitsVal + '' || '元/平米/月'}}</span> -->
                  <span class="textOH"
                    style="line-height: 20px;height: 20px;z-index: 1;width: 50%;border-left: 1px solid #E5E5E5;">元/平米/月</span>
                </div>
                <div class="dy-fx-3 border-r overflow">
                  <input type="number" class="w-max text-center" v-model="item.expense_period"
                    @change="yaTotalFun(item.price,item.expense_period,index)" placeholder="请输入">
                </div>
                <div class="dy-fx-3 border-r overflow">
                  <input type="number" class="w-max text-center" v-model="item.amount" >
                </div>
                <div class="dy-fx-3 border-r overflow">
                  <input type="number" class="w-max text-center" v-model="item.late_fee" >
                </div>
                <div class="dy-fx-2 dy-flex" style="justify-content: center; align-items: center;">
                  <a href="javascript:;" @click="costItem.splice(index,1)">删除</a>
                </div>
              </div>
            </div>
          </div>
          <div class="mt-10">
            <span class="ct-rd-add" @click="addCostItem('D')"><b class="icon-Org-account"></b>新增押金费项</span>
          </div>
          <div class="mt-15">
            <span>押金金额：{{yaTotal}}</span>
          </div>
        </div>
      </div>
      <!-- 免租期 -->
      <div class="MZQ">
        <div class="section_title">
          <span>免租期/装修期</span>
          <div @click="addMZQ"><b class="icon-Org-account"></b>新增</div>
        </div>
        <div v-if="freePeriod.length">
          <div class="ct-ladder-wrap mt-15 border">
            <ul class="dy-flex ct-ladder-list bg-filter border-b color-gray">
              <li class="dy-fx-2">免租/装修开始时间</li>
              <li class="dy-fx-2">免租/装修结束时间</li>
              <li class="dy-fx-1">账单去除</li>
              <li class="dy-fx-1">备注</li>
              <li class="dy-fx-1">操作</li>
            </ul>
            <ul class="dy-flex ct-ladder-list border-b entry_list" v-for="(item,index) in freePeriod">
              <li class="dy-fx-2" style="padding:0 10px;">
                <web-calendar type="primary" v-model="item.btime"
                  :beforedate="index > 0 ? freePeriod[index-1].etime : beginDate"></web-calendar>
              </li>
              <li class="dy-fx-2" style="padding:0 10px;">
                <web-calendar type="primary" v-model="item.etime" :beforedate="item.btime"></web-calendar>
              </li>
              <li class="dy-fx-1 mzqStyle" style="padding:0 10px;height:40px;">
                <hl-checkbox :data="flagList" v-model="item.flag" v-show="index == 0"></hl-checkbox>
              </li>
              <li class="dy-fx-1" style="padding:0 10px;">
                <input type="text" class="form-control ct-number-ipt" v-model="item.memo" >
              </li>
              <li class="dy-fx-1" @click="freePeriod.splice(index,1)"><a>删除</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 营业额抽成 -->
      <div class="YYECC" v-if="haveYYECCflag && permissions.indexOf('c307') > -1">
        <div class="section_title">
          <span>营业额抽成</span>
          <div v-if="!isYYECCflag" @click="setYYECC"><b class="icon-Org-account"></b>新增</div>
          <div v-if="isYYECCflag" @click="setYYECC"><b class="icon-Gm-delete-2"></b>删除</div>
        </div>
        <div v-show="isYYECCflag">
          <div class="clearfix mt-10" style="margin-bottom:10px;">
            <div class="pull-left" style="display:flex;align-items:center">
              <span class="mr-10 color-666" style="width: 65px">抽成方式:</span>
              <hl-radio :data="turnoverArr" v-model="turnoverCode"></hl-radio>
              <span class="iconHover">
                <li class="icon-Gm-explain"></li>
                <li class="hoverText">
                  <div></div>
                  <ul class="instro">
                    <li style="margin-bottom:15px">
                      <span style="font-size:14px;margin-bottom: 6px">分段抽成</span>
                      <span>选取营业额处于基数区间的所有规则阶梯计算抽成金额</span>
                    </li>
                    <li>
                      <span style="font-size:14px;margin-bottom: 6px">一次性抽成</span>
                      <span>选取营业额处于基数区间的此一条规则单独计算抽成金额</span>
                    </li>
                  </ul>
                </li>
              </span>
            </div>
            <div class="pull-right" style="display:flex;align-items:center" v-if="haveGDflag">
              <span class="hl-checkbox color-999" :class="{active: turnoverCheckBox == 'Y' && isGDZJflag }"
                style="padding-left: 6px;margin-right: 0;" @click="takeHigh">与租金取其高</span>
              <span class="iconHover" style="margin-left:10px;margin-top: -3px">
                <li class="icon-Gm-explain"></li>
                <li class="hoverText" style="left: -345px">
                  <div style="left: 345px;"></div>
                  <ul class="instro">
                    租金与租金取其高时，根据抽成与租金金额大小确定每期账单费用
                  </ul>
                </li>
              </span>
            </div>
          </div>
          <div class="insertbox">
            付款周期：<input type="number" class="form-control ct-number-ipt" v-model="paymentCycle"
              :disabled="turnoverCheckBox == 'Y'" style="background:#fff;width: 76px" >月
          </div>
          <div class="clearfix contract-deta dy-flex">
            <div class="pull-left " style="display:flex;align-items:center">
              <span class="mr-10 color-666" style="width: 65px">收款日:</span>
              <hl-radio :data="paymentType" v-model="paymentTypeCode"></hl-radio>
            </div>
            <div class="dy-flex" v-if="paymentTypeCode == 'CM'">
              <ul class="ct-select-year">
                <li :class="{active: item.code == billDateQHcode, 'js-sks':true}" v-for="item in billDateQH"
                  @click="billDateQHcode = item.code" style="width: 100px;cursor:pointer;">{{item.name}}</li>
              </ul>
              <ul class="ct-select-year ml-24">
                <li :class="{active: item.code == billDaycode, 'js-sks1':true}" v-for="item in billDay"
                  @click="billDaycode = item.code" style="width: 100px;cursor:pointer;">{{item.name}}</li>
              </ul>
              <span class="ml-24">
                <input type="number" class="bg-fff form-control inline js-skrr" style="width:60px;" v-model="dayNum" />
                <span v-if="billDaycode == 'TS'">个自然日</span>
              </span>
            </div>
          </div>

          <div class="entry-container" v-for="(item, index) in tableArr">
            <div class="entry-header">
              <ul>
                基数区间：
                <li class="color_Orange">{{item.base_val_down_limit}}
                  <span class="orangeBlock"></span>
                  <input type="number" class="form-control ct-number-ipt color_Orange" style="margin:0"
                    v-if="index < tableArr.length-1" v-model="item.base_val_up_limit" @blur="blurYYE(index)" >
                  <span v-if="index == tableArr.length-1">不限</span>
                  <span style="margin-left: 10px;color:#999">(元)</span>
                </li>
              </ul>
              <ul>
                <span class="ct-rd-add" @click="removeYYE(index)" v-if="tableArr.length > 1"><b
                    class="icon-Gm-delete-2"></b>
                  删除此抽成
                </span>
              </ul>
            </div>
            <div class="entry-body">
              <ul>抽成比例：<input type="number" class="form-control ct-number-ipt" v-model="item.commission_percent" >%</ul>
              <ul>抽成区间：
                <input type="number" class="form-control ct-number-ipt" v-model="item.commission_down_limit"
                  @blur="isLowerYYE(index)" placeholder="(非必填)"> -
                <input type="number" class="form-control ct-number-ipt" v-model="item.commission_up_limit"
                  @blur="isUpYYE(index)" style="margin-left: 10px" placeholder="(非必填)">（元）</ul>
              <ul>滞纳金比例：<input type="number" class="form-control ct-number-ipt" v-model="item.late_fee_percent"
                  placeholder="(非必填)">%</ul>
            </div>
          </div>
          <div style="margin:17px 0 30px;font-size:14px">
            <span class="ct-rd-add" @click="addYYE"><b class="icon-Org-account"></b>
              新增一条抽成
            </span>
          </div>
        </div>
      </div>
      <!-- 周期性费项 -->
      <div class="ZQXFX">
        <div class="section_title">
          <span>周期性费项</span>
          <div @click="addCostItem('P')"><b class="icon-Org-account"></b>新增</div>
        </div>
        <div class="ct-free-wrap mt-15 border" v-if="ptotal > 0">
          <div class="dy-flex ct-ladder-list bg-filter border-b color-gray">
            <div class="dy-fx-4">费用名</div>
            <div class="dy-fx-3">单价(仅展示)</div>
            <div class="dy-fx-2">日金额</div>
            <div class="dy-fx-2">月金额</div>
            <div class="dy-fx-2">计费时间</div>
            <div class="dy-fx-2">付款周期</div>
            <div class="dy-fx-2">滞纳金比例(%)</div>
            <div class="dy-fx-2">操作</div>
          </div>
          <div class="dy-flex ct-ladder-list border-b" v-for="(item, index) in costItem" v-if="item.expense_type == 'P'"
            style="height: auto; line-height:34px;">
            <div class="dy-fx-4 border-r" @click="getcostY(index,'P')">
              <hl-select :data="cTData_P" v-model="item.expense_code" type="number" width=""
                @on-change="getCTtype($event)">
              </hl-select>
            </div>
            <div class="dy-fx-3 border-r relative dy-flex" style="align-items: center">
              <input type="number" class="w-max bg-fff"
                style="text-align: center;text-indent: 8px;width: 50%;border-right: 1px solid #E5E5E5"
                v-model="item.price" placeholder="非必填" @change="calculateDM(item.unitsCode,index,item.price)">
              <hl-select :data="expenditureUnit" v-model="item.unitsCode" type="number" width="100"
                @on-change="calculateDM(item.unitsCode,index,item.price)"></hl-select>
            </div>
            <div class="dy-fx-2 border-r overflow">
              <input type="number" class="w-max text-center" v-model="item.priceDay"
                @blur="linkage(item.priceDay,index,'d')" placeholder="请输入">
            </div>
            <div class="dy-fx-2 border-r overflow">
              <input type="number" class="w-max text-center" v-model="item.priceMonth"
                @blur="linkage(item.priceMonth,index, 'm')" >
            </div>

            <div class="dy-fx-2 border-r dy-flex" @click="putEindex(index)" style="justify-content: center; align-items: center;">
              <div>
                <div style="line-height: 24px;" v-for="item1 in item.customPeriod" v-if="item.customPeriod.length">{{item1.begin_date}} 至 {{item1.end_date}}</div>
                <div style="line-height: 24px; color:#337ab7; cursor:pointer;" v-if="!item.customPeriod.length"> 同租赁周期 </div>
              </div>
            </div>

            <div class="dy-fx-2 border-r dy-flex overflow">
              <div class="dy-fx-2">
              <!-- <div class="dy-fx-2" :class="{ 'expense-fk-item-wrapper': item.customPeriod.length == 0 }"> -->
                <input type="number" class="w-max text-center" v-model="item.expense_period" placeholder="请输入">
                <!-- <input type="number" class="w-max text-center" v-model="item.expense_period" placeholder="请输入" :disabled="!item.customPeriod.length"> -->
              </div>
              <span class="dy-fx-1 border-l dy-flex" style="justify-content: center; align-items: center;">月</span>
            </div>

            <div class="dy-fx-2 border-r overflow">
              <input type="number" class="w-max text-center" v-model="item.late_fee" >
            </div>

            <div class="dy-fx-2 dy-flex" style="justify-content: center; align-items: center;">
              <a href="javascript:;" @click="costItem.splice(index,1)">删除</a>
            </div>

          </div>
        </div>
      </div>
      <!-- 周期性费项（选择计费周期） -->
      <div style="width: 100%;position: fixed;left: 0;top: 0;height: 100%;display: flex;justify-content: center;
			align-items: center;z-index: 999;" v-if="isZQXFXtimeFlag">
        <div class="mark-container" style="width: 480px;">
          <div class="title">计费时间</div>
          <div class="close" @click="isZQXFXtimeFlag = false">x</div>
          <div style="padding: 25px; background: rgb(242, 242, 242);max-height: 210px;overflow-y: scroll;">
            <div class="box-i-shadow-1 bg-fff br-4">
              <div class="dy-flex color-gray text-center" style="line-height: 34px;">
                <div class="dy-fx-1 border-r">序号</div>
                <div class="dy-fx-2 border-r">开始时间</div>
                <div class="dy-fx-2 border-r">结束时间</div>
                <div class="dy-fx-2">操作</div>
              </div>
              <div class="dy-flex color-gray text-center border-t" v-for="(item,index) in setZXQFXtimeList">
                <div class="dy-fx-1 border-r">{{index+1}}</div>
                <div class="dy-fx-2 border-r">
                  <web-calendar v-model="item.begin_date" tips="非必选" position="fixed"
                    @change="checkZQXFXtime(item.begin_date,item.end_date,index,'B')"></web-calendar>
                </div>
                <div class="dy-fx-2 border-r">
                  <web-calendar v-model="item.end_date" tips="非必选" position="fixed"
                    @change="checkZQXFXtime(item.begin_date,item.end_date,index,'A')"></web-calendar>
                </div>
                <div class="dy-fx-2"><a @click="delZQXFXtime(index)">删除</a></div>
              </div>
            </div>
            <div class="button-date mt-10">
              <button type="button" class="btn s-btn-default mr-10"
                style="height: 28px; line-height: 28px; padding: 0px 10px;" @click="addDate">添加一行</button>
              <button type="button" class="btn s-btn-default mr-10" v-if="setZXQFXtimeList.length"
                style="height: 28px; line-height: 28px; padding: 0px 10px" @click="completion">自动补全</button>
            </div>
          </div>
          <div class="footer-date-container text-center" style="padding: 5px 0px;">
            <button class="n-btn-primary br-4 text-center"
              @click="costItem[cTIndex].customPeriod = setZXQFXtimeList,isZQXFXtimeFlag = false">确定</button>
            <button class="n-btn-outline br-4 text-center mlr-24" @click="setZXQFXtimeList = []">重置</button>
            <button class="n-btn-outline br-4 text-center" @click="isZQXFXtimeFlag = false">取消</button>
          </div>
        </div>
      </div>
      <!-- 一次性费项 -->
      <div class="YCXFX">
        <div class="section_title">
          <span>一次性费项</span>
          <div @click="addCostItem('O')"><b class="icon-Org-account"></b>新增</div>
        </div>
        <div class="ct-free-wrap mt-15 border" v-if="ototal > 0">
          <div class="dy-flex ct-ladder-list bg-filter border-b color-gray">
            <div class="dy-fx-3">费用名</div>
            <div class="dy-fx-3">单价</div>
            <div class="dy-fx-3">总金额(元)</div>
            <div class="dy-fx-3">收款时间</div>
            <div class="dy-fx-3">备注</div>
            <div class="dy-fx-3">滞纳金比例(%)</div>
            <div class="dy-fx-2">操作</div>
          </div>
          <div class="dy-flex ct-ladder-list border-b" v-for="(item, index) in costItem" v-if="item.expense_type == 'O'"
            style="height: auto; line-height:34px;">
            <div class="dy-fx-3 border-r" @click="getcostY(index,'O')">
              <hl-select :data="cTData_O" v-model="item.expense_code" type="number" width=""
                @on-change="getCTtype($event)">
              </hl-select>
            </div>
            <div class="dy-fx-3 border-r overflow relative dy-flex" style="align-items: center">
              <input type="number" class="w-max bg-fff" style="text-align: center;text-indent: 8px;width: 50%"
                v-model="item.price" placeholder="非必填">
              <span class="textOH"
                style="line-height: 20px;height: 20px;z-index: 1;width: 50%;border-left: 1px solid #E5E5E5;">{{item.unitsVal + '' || '--'}}</span>
            </div>
            <div class="dy-fx-3 border-r overflow">
              <input type="number" class="w-max text-center" v-model="item.amount" placeholder="请输入">
            </div>
            <div class="dy-fx-3 border-r dy-flex" @click="openYCXExpenseFlag(index)" style="justify-content: center; align-items: center;">
              <div>
                <div style="line-height: 24px;color:#337ab7; cursor:pointer;"> {{ item.end_date ? item.end_date : '同首期账单'}} </div>
              </div>
            </div>
            <div class="dy-fx-3 border-r overflow">
              <input class="w-max text-center" v-model="item.memo" placeholder="请输入">
            </div>
            <div class="dy-fx-3 border-r overflow">
              <input type="number" class="w-max text-center" v-model="item.late_fee" >
            </div>
            <div class="dy-fx-2 dy-flex" style="justify-content: center; align-items: center;">
              <a href="javascript:;" @click="costItem.splice(index,1)">删除</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 一次性费项（选择计费周期） -->
      <div style="width: 100%;position: fixed;left: 0;top: 0;height: 100%;display: flex;justify-content: center;
      align-items: center;z-index: 999;" v-if="isYCXExpenseFlag">
        <div class="mark-container" style="width: 480px;">
          <div class="title">收款时间</div>
          <div class="close" @click="isYCXExpenseFlag = false">x</div>
          <div style="padding: 25px; background: rgb(242, 242, 242);">
            <div class="bg-fff br-4">
                <div class="dy-fx-1">
                  <web-calendar v-model="selectedYcxEndDate" tips="非必选" position="fixed" type="primary"></web-calendar>
                </div>
            </div>
          </div>
          <div class="footer-date-container text-center" style="padding: 5px 0px;">
            <button class="n-btn-primary br-4 text-center" @click="costItem[ycxExpenseTimeIndex].end_date = selectedYcxEndDate,isYCXExpenseFlag = false">确认</button>
            <button class="n-btn-outline br-4 text-center" @click="isYCXExpenseFlag = false">取消</button>
          </div>
        </div>
      </div>

      <!-- 临时费项 -->
      <div class="LSFX">
        <div class="section_title">
          <span>临时费项</span>
          <div @click="addCostItem('T')"><b class="icon-Org-account"></b>新增</div>
        </div>
        <div class="ct-free-wrap mt-15 border" v-if="ttotal > 0">
          <div class="dy-flex ct-ladder-list bg-filter border-b color-gray">
            <div class="dy-fx-3">费用名</div>
            <div class="dy-fx-3">金额(元)</div>
            <div class="dy-fx-3">税率(%)</div>
            <div class="dy-fx-2">操作</div>
          </div>
          <div class="dy-flex ct-ladder-list border-b" v-for="(item, index) in costItem" v-if="item.expense_type == 'T'"
            style="height: auto; line-height:34px;">
            <div class="dy-fx-3 border-r" @click="getcostY(index,'O')">
              <input type="text" v-model="item.expense_name" placeholder="请输入">
            </div>
            <div class="dy-fx-3 border-r overflow">
              <input type="number" class="w-max text-center" v-model="item.amount" placeholder="请输入">
            </div>
            <div class="dy-fx-3 border-r overflow">
              <input type="number" class="w-max text-center" v-model="item.tax_percent" placeholder="请输入">
            </div>
            <div class="dy-fx-2 dy-flex" style="justify-content: center; align-items: center;">
              <a href="javascript:;" @click="costItem.splice(index,1)">删除</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="backdrop" style="margin: 0" v-if="isZQXFXtimeFlag"></div>
    <div class="backdrop" style="margin: 0" v-if="isYCXExpenseFlag"></div>
    <div class="ptb-10">
      <a href="javascript:;" class="btn n-btn-primary next-step-btn js-next-step mr-16" type="submit"
        @click="prevData">上一步</a>
      <button class="btn n-btn-outline mr-16" type="button" @click="createBillPlan(1)">生成付款计划</button>
      <button class="btn n-btn-outline" type="button" @click="createBillPlan(2)"
        v-if="contractId && !reletFlag">使用原付款计划</button>
    </div>
    <!--付款计划-->
    <hl-pay-plan ref='payPlan' v-if="isPayBillFlag" v-model="resData" :data="payData" @on-change-date="changeaaaa"
      :e-data="ePayData" :intention-amount="intentDeductibleAmount" :is-Yajin="isYajin"></hl-pay-plan>
    <div class="ptb-10  ct-ceat-btn" v-if="isPayBillFlag">
      <a href="javascript:;" class="btn n-btn-primary next-step-btn js-next-step mr-16" type="submit"
        @click="saveContract(6)" v-if="contractId && !reletFlag">保存</a>
      <a href="javascript:;" class="btn n-btn-primary next-step-btn js-next-step mr-16" type="submit"
        @click="saveContract(5)" v-if="contractId && reletFlag">生成合同</a>
      <a href="javascript:;" class="btn n-btn-primary next-step-btn js-next-step mr-16" type="submit"
        @click="saveContract(1)" v-if="!contractId">生成合同</a>
      <button class="btn n-btn-outline mr-16" type="button" @click="saveContract(2)"
        v-if="!contractId || (contractId && reletFlag)">存为草稿</button>
      <button class="btn n-btn-outline" type="button" @click="previewTemPrint"
        v-if="!contractId || (contractId && reletFlag)">合同预览/导出</button>
    </div>
    <!-- 合同打印、预览 -->
    <div class=" pop box-o-shadow contract-confirm-layer">
      <div class="templateList" v-if="TemplateModulShow == true">
        <div class="templateList_title">
          合同导出
          <span class="icon-Gm-close TC_close_icon" @click="TemplateModulShow = false"></span>
        </div>
        <div class="templateList_content">
          <div class="TC_header ">
            <div>
              <span>选择导出文件类型：<span style="color:#ccc"> (可多选)</span></span>
              <button type="button" class="btn s-btn-default" @click="addNewTem">新建模板</button>
            </div>
            <ul class="">
              <li v-for="(item,index) in TemTypeList">
                <span :class="selectedTemTypeList.indexOf(item) >= 0 ? 'check-auth-active':'check-auth'"
                  @click="selectedTemType(item)"></span>
                <span>{{item}}文档</span>
              </li>
            </ul>
          </div>
          <div class="TC_body">
            <div><span>选择导出模板：<span style="color:#ccc"> (请选择一个模板）</span></span>
            </div>
            <div class="tem-item-box">
              <ul class="tem-item" v-for="(item,index) in temList">
                <li class="TC_mask" @click="preview(item.id)">预览</li>
                <li class="TC_text  ellipsis-1">{{item.templateName}}</li>
                <span class="check-item"></span>
                <span class="icon-right-nav-Selected  TC_selected_icon"
                  :class="selectedTemList == item.id ? 'TC_selected_active':''" @click="selectedTem(item)"></span>
              </ul>
            </div>
          </div>

        </div>
        <div class="templateList_footer">
          <button type="button" class="btn n-btn-primary" style="margin-right: 50px;"
            @click="exportTemplate">导出</button>
          <button type="button" class="btn n-btn-outline" @click="TemplateModulShow = false">取消</button>
        </div>
      </div>
    </div>
    <div class="hllayer-mask" v-show="TemplateModulShow"></div>
  </div>
  </div>
</main>
<script src="modules/contract/scripts/contract_create_2.js" charset="utf-8"></script>
